<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>交换机资产信息管理</title>
    <link href="../static/layui/css/layui.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/iconfont/iconfont.css">
	<style>
        .layui-table-cell {
			text-align: center;
			height: auto;
			white-space: normal;
		}
    </style>
  </head>
  <body>
	<div class="layui-form" action="" lay-filter="demo-val-filter">
	  <div class="layui-row layui-col-space8">
		<div class="layui-col-md4" style="margin-left: 60px">
		 <div class="layui-input-group">
		  <div class="layui-input-split">
			所在部门
		  </div>
		  <input type="text" placeholder="" class="layui-input" name="所在部门" style="margin-left: 15px">
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 60px">
		 <div class="layui-input-group">
		  <div class="layui-input-split layui-input-prefix">
			IP地址
		  </div>
		  <input type="text" placeholder="" class="layui-input" name="IP地址">
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 40px">	
		<label class="layui-form-label">厂商品牌</label>
		  <div class="layui-input-inline">
			<select name="厂商" lay-search>
				<option value="">选择或搜索</option>
				<option value="锐捷">锐捷</option>
				<option value="华为">华为</option>
				<option value="H3C">H3C</option>
				<option value="Cisco">Cisco</option>
				<option value="ZDNS">ZDNS</option>
				<option value="信锐">信锐</option>
				<option value="东土">东土</option>
				<option value="天融信">天融信</option>
			</select>
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 80px">
		 <div class="layui-input-group">
		  <div class="layui-input-split layui-input-prefix">
			设备名
		  </div>
		  <input type="text" placeholder="" class="layui-input" name="设备名">
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 100px">
		 <div class="layui-input-group">
		  <div class="layui-input-split layui-input-prefix">
			型号
		  </div>
		  <input type="text" placeholder="" class="layui-input" name="型号">
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 20px">
		 <div class="layui-input-group">
		  <div class="layui-input-split layui-input-prefix">
			系列号
		  </div>
		  <input type="text" placeholder="" class="layui-input" name="序列号">
		</div>
		</div>
		
		<div class="layui-col-md4" style="margin-left: 85px">
		 <div class="layui-input-group">
		  <div class="layui-input-split layui-input-prefix">
			关键词
		  </div>
		  <input type="text" placeholder="请输入搜索关键词" class="layui-input" name="keyWord">
		</div>
		</div>
		
		<div class="layui-form-item" style="margin-left: 525px">
		   
			<button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="searchSwitch" style="margin-left: 70px" lay-filter="refresh">
				<i class="layui-icon">&#xe615;</i>查&emsp;询
			</button>
			<button id="claerset" type="reset" class="layui-btn layui-btn-primary">清&emsp;空</button>
		</div>
		
		
	  </div>
	</div>
	
	<!-- 这是一个HTML注释 --> 
    <table class="layui-hide" id="ID-test-table"></table>

    <script type="text/html" id="ID-demo-table-tool">
      <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
      <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">删除</a>
	  <a class="layui-btn layui-bg-purple layui-btn-xs" lay-event="photo">查看全图</a>
    </script>
	
	<!-- 这是一个HTML注释2 -->
	<script type="text/html" id="addEditDelBar">
		<button lay-event="add" class="layui-btn layui-btn-sm icon-btn">
			<i class="layui-icon">&#xe654;</i>添加
		</button>
		<button lay-event="exportall" class="layui-btn layui-btn-sm">
			<i class="layui-icon">&#xe67d;</i>导出全部
		</button>
		
		<button lay-event="importdata" class="layui-btn layui-btn-sm">
			<i class="iconfont icon-daorushuju1"></i>导入数据
		</button>
	</script>
	
	<!-- 页面层 -->
	<div class="box box-danger" style="display:none;" id="show_div">
		<!-- 给 form 表单添加 lay-filter 属性 -->
		<form class="layui-form" id="addForm" method="post" lay-filter="layui-edit-form">
		
			<div class="layui-form-item">
				<label class="layui-form-label">区域属名</label>
				<div class="layui-input-block">
				  <input type="text" name="区域属名" placeholder="" class="layui-input">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">所在部门</label>
				<div class="layui-input-block">
				  <input type="text" name="所在部门" placeholder="" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">设备名称</label>
				<div class="layui-input-block">
				  <input type="text" name="设备名称" placeholder="" class="layui-input">
				</div>
			</div>
			
			
			<div class="layui-form-item">
				<label class="layui-form-label norequired">设备照片</label>
				<div class="layui-input-block">
				  <input type="text" name="设备照片" id="input_file_form" value="" placeholder="" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block">		
				<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon layui-icon-upload"></i>图片上传
				</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
					预览图：
					<div class="layui-upload-list" id="upload-demo-preview"></div>
				</blockquote>

			</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">所属网络安全分区</label>
				<div class="layui-input-block">
				  <input type="text" name="所属网络安全分区" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">运行状态</label>
				<div class="layui-input-block">
				  <input type="text" name="运行状态" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">三区管理地址1</label>
				<div class="layui-input-block">
				  <input type="text" name="三区管理地址1" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">三区管理地址2</label>
				<div class="layui-input-block">
				  <input type="text" name="三区管理地址2" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">四区管理地址1</label>
				<div class="layui-input-block">
				  <input type="text" name="四区管理地址1" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">四区管理地址2</label>
				<div class="layui-input-block">
				  <input type="text" name="四区管理地址2" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">五区管理地址</label>
				<div class="layui-input-block">
				  <input type="text" name="五区管理地址" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">放置地点</label>
				<div class="layui-input-block">
				  <input type="text" name="放置地点" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">房间</label>
				<div class="layui-input-block">
				  <input type="text" name="房间" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">屏柜</label>
				<div class="layui-input-block">
				  <input type="text" name="屏柜" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">U数</label>
				<div class="layui-input-block">
				  <input type="text" name="U数" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">登录方式</label>
				<div class="layui-input-block">
				  <input type="text" name="登录方式" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否启用3A</label>
				<div class="layui-input-block">
				  <input type="text" name="是否启用3A" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
				  <input type="text" name="用户名" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
				  <input type="text" name="密码" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">enable密码</label>
				<div class="layui-input-block">
				  <input type="text" name="enable密码" placeholder="" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">厂商</label>
				  <div class="layui-input-inline">
					<select name="厂商" lay-search>
						<option value="">选择或搜索</option>
						<option value="锐捷">锐捷</option>
						<option value="华为">华为</option>
						<option value="H3C">H3C</option>
						<option value="Cisco">Cisco</option>
						<option value="ZDNS">ZDNS</option>
						<option value="信锐">信锐</option>
						<option value="东土">东土</option>
						<option value="天融信">天融信</option>
					</select>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
				  <input type="text" name="类型" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">型号</label>
				<div class="layui-input-block">
				  <input type="text" name="型号" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">序列号</label>
				<div class="layui-input-block">
				  <input type="text" name="序列号" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">软件版本</label>
				<div class="layui-input-block">
				  <input type="text" name="软件版本" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设备名</label>
				<div class="layui-input-block">
				  <input type="text" name="设备名" placeholder="" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
				  <input type="text" name="备注" placeholder="" class="layui-input">
				</div>
			</div>
			

		</form>
	</div>
	
	<!-- 页面层22 -->
	<div class="box box-danger" style="display:none;" id="add_import">
	<form class="layui-form" method="post" lay-filter="add_import" style="padding: 0 20px 0 0;">
		<div class="layui-form-item">
			<label class="layui-form-label">上传文件</label>
			<div class="layui-input-block">
				<div class="">
					<button type="button" class="layui-btn" id="selectfile" style="background-color: #5fb878;">
					<i class="layui-icon">&#xe67c;</i>选择文件</button>
					<span style="height: 38px;line-height: 38px;color: #999;font-size: 13px;margin-left: 10px;">仅支持xlsx、xls格式</span>
				</div>
				<p id="output"></p> 
			</div>
		</div>
	</form>
	</div>
	
    <script src="../static/layui/layui.js"></script>
    <script>
	var defaultData = {
		"U数": "",
		"enable密码": "",
		"三区管理地址1": "",
		"三区管理地址2": "",
		"五区管理地址": "",
		"加固人员": "",
		"加固情况": "",
		"加固时间": "",
		"区域属名": "",
		"厂商": "",
		"四区管理地址1": "",
		"四区管理地址2": "",
		"型号": "",
		"备注": "",
		"密码": "",
		"屏柜": "",
		"序列号": "",
		"房间": "",
		"所在部门": "",
		"所属网络安全分区": "",
		"放置地点": "",
		"是否启用3A": "",
		"用户名": "",
		"登录方式": "",
		"类型": "",
		"设备名": "",
		"设备名称": "",
		"软件版本": "",
		"运行状态": "",
		"设备照片": "",
	};
	function sortDictionary(dict) {
	  // 获取所有键，并排序
	  const sortedKeys = Object.keys(dict).sort();
	  // 创建一个新的对象，按照排序后的键来添加属性
	  const sortedDictionary = {};
	  sortedKeys.forEach(key => {
		val = dict[key];
		if (val == null){val=""};
		sortedDictionary[key] = val;
	  });
	  return sortedDictionary;
	};
    layui.use(function() {
      // 获得需要的内置组件
	  var $ = layui.$;  // jquery
      var layer = layui.layer; // 弹层
      var laypage = layui.laypage; // 分页
      var laydate = layui.laydate; // 日期
      var table = layui.table; // 表格
      var carousel = layui.carousel; // 轮播
      var upload = layui.upload; // 上传
      var element = layui.element; // 元素操作
      var slider = layui.slider; // 滑块
      var dropdown = layui.dropdown; // 下拉菜单
	  var form = layui.form;  // 表单
	  // var selectInput = layui.selectInput;
	  console.log("start=", form);
      // 向世界问个好
      // layer.msg('Hello World');
	  // 清空重置
	  $('#claerset').on('click', function(){
		form.val('demo-val-filter', {
		  "所在部门": "", // "name": "value"
		  "IP地址": "",
		  "厂商": "",
		  "设备名": "",
		  "型号": "",
		  "序列号": "",
		  "keyWord": "",
		});
	  });
	  
	  // 先获取数据字段  删除 fixed: 'right', 
	  var bootm = {fixed: 'right', title: '操作', width: 140, align:'center', toolbar: '#ID-demo-table-tool'};
	  var cols = [[ // 表头
		  {type: 'checkbox'},
          // {type: 'checkbox', fixed: 'left'},
      ]];
	  // cols[0].push(bootm); // 把操作放在前面
	  $.ajaxSettings.async = false;
	  $.getJSON('/switch', function(data){
			// console.log(data);
			var fields = data.cols;
			//console.log("fields===", fields);
			fields.forEach(function(item) {
			  // console.log("item", item);
			  var oneCol = {'field': item[0], 'title': item[1], width: 140, sort: true}
			  if (item[0] === "设备照片"){
				// 这里不d.设备照片 不能用 两个花括号 会和python 的模板冲突
				//      d.设备照片
				oneCol = {field: '设备照片', title: '设备照片', width: 180}
				oneCol.templet = (d)=>{return '<img src="'+ JSON.parse(d.设备照片)[0].src +'">';}
			  }
			  cols[0].push(oneCol)
			});
	  })
	  cols[0].push(bootm);  //  把操作放在后面
	  console.log("cols:====", cols)
      // 执行一个 table 实例
      var dataTable = table.render({
        elem: '#ID-test-table',
        height: 650,
        url: '/switch', // 数据接口（此处为静态数据，仅作演示）
		method:'post',
        title: '交换机资产信息表',
        page: true, // 开启分页
		limit: 20,
		limits: [10, 20, 30, 50, 100],
        //toolbar: 'default', // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		toolbar: '#addEditDelBar',
        totalRow: true, // 开启合计行
        cols: cols,
		done: function (index, layero) {
			//表头部分
			//动态监听表头高度变化，冻结行跟着改变高度
			$(".layui-table-header  tr").resize(function () {
			  $(".layui-table-header  tr").each(function (index, val) {
				$($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
			  });
			});
			//初始化高度，使得冻结行表头高度一致
			$(".layui-table-header  tr").each(function (index, val) {
			  $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
			});

			//表体部分
			//动态监听表体高度变化，冻结行跟着改变高度
			$(".layui-table-body  tr").resize(function () {
			  $(".layui-table-body  tr").each(function (index, val) {
				$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
			  });
			});
			//初始化高度，使得冻结行表体高度一致
			$(".layui-table-body  tr").each(function (index, val) {
			  $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
			});
		},
      });

      // 头工具栏事件
      table.on('toolbar(ID-test-table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data; // 获取选中的数据

        switch(obj.event){
          case 'add':
            // layer.msg('添加, test');
			layer.open({
			type: 1
			,title:'添加交换机'
			//,content: '/static/edit5.html'
			,content: $("#show_div")
			,area: ['500px', '520px']
			,btn: ['确定', '取消']
			,shade: 0.6
			,shadeClose: true
			,maxmin: true
			,success: function(layero, index){
				console.log('------')
				// 在弹出层打开后，重置表单数据 TODO
				layui.form.render(null, 'layui-edit-form');
				form.val("layui-edit-form", defaultData);
				const eleList = document.getElementById('upload-demo-preview');
				while ((element = eleList.firstChild)) {
					element.remove();
				}
			}
			,yes: function(index, layero){
				// 提交后的数据
				var inputData = form.val("layui-edit-form");
				console.log("inputData", inputData);
				// 请求后台接口添加数据
				$.ajax({
					url:'/add',
					type:'POST',
					data: inputData,
					success:function(data){
						if(data.code==0){
							layer.msg("添加成功!", {icon: 1, time: 1000})
						}else{
							layer.msg('添加失败!')
						}
					}
				});
				layer.close(index);
			}
			,btn2: function(index, layero){
				layer.close(index);
			}
		    });
          break;
          case 'update':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else if(data.length > 1) {
              layer.msg('只能同时编辑一个');
            } else {
			  var firstData = data[0];
              layer.alert('编辑 [id] : '+ firstData.id);
			  console.log('编辑数据：', firstData)
            }
          break;
          case 'delete':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else {
              layer.msg('删除');
			  console.log('删除数据：', data)
            }
          break;
		  case 'exportall':
			layer.msg('导出中', {icon: 1});
			// 获取查询表单数据
			var fmdata = form.val('demo-val-filter');
			console.log("表单取值:", fmdata)
			fmdata.page = '1';
			fmdata.limit = '10000'
			$.ajax({
				url: '/switch', // 请求的URL
				type: 'POST', // 请求类型，可以是GET或POST
				data: fmdata,
				dataType: 'json', // 预期服务器返回的数据类型
				success: function(res) {
					// 请求成功时的回调函数
					table.exportFile(dataTable.config.id, res.data, 'xls');
					console.log("导出完成")
				},
				error: function(xhr, status, error) {
					// 请求失败时的回调函数
					console.log(xhr.responseText);
				}
			});
		  break;
		  // 导入数据
		  case 'importdata':
            layer.msg('导入数据');
			layer.open({
			  type: 1, // page 层类型
			  title: '从Excel导入数据',
			  area: ['500px', '300px'],
			  btn: ['导入', '取消'],
			  shade: 0.6, // 遮罩透明度
			  shadeClose: true, // 点击遮罩区域，关闭弹层
			  maxmin: true, // 允许全屏最小化
			  anim: 0, // 0-6 的动画形式，-1 不开启
			  content: $("#add_import"),
			  success: function(layero, index, that){
				// 弹层的最外层元素的 jQuery 对象
				console.log("layer success:",layero);
				document.getElementById("output").innerHTML = "";
			  },
			  yes: function(index, layero){
			    console.log("layer yes:",layero);
				var filename = document.getElementById("output").innerHTML;
				console.log("选择的文件:", filename)
				if (filename == ""){
					layer.msg("请先选择文件", {icon: 0, time: 2000});
				}else{
					layer.close(index);
					// 请求接口导入数据
					$.ajax({
						url:'/import',
						type:'POST',
						data: {"import": 1},
						success:function(data){
							if(data.code==0){
								let count = data.count;
								let msg = `导入成功,一共导入${count}条数据`;
								layer.msg(msg, {icon: 1, time: 3000});
								table.reload('ID-test-table', { where: {}, page: {curr: 1} });
							}else{
								layer.msg('导入失败!')
							}
						}
					});
				}
			
			  },
			  btn2: function(index, layero){
				layer.close(index);
			  },
			  
			});
			
          break;
		  // 
        };
      });

      // 单元格工具事件
      table.on('tool(ID-test-table)', function(obj) {
        var data = obj.data; // 获得当前行数据
        var layEvent = obj.event; // 获得 lay-event 对应的值

        if (layEvent === 'detail') {
          layer.msg('查看操作');
        } else if(layEvent === 'edit') {
          console.log('编辑操作，当前行 ID:'+ data.id);
		  layer.open({
			type: 1
			,title:'编辑交换机信息，ID为' + data.id
			//,content: '/static/edit5.html'
			,content: $("#show_div")
			,area: ['500px', '520px']
			,btn: ['保存', '取消']
			,shade: 0.6
			,shadeClose: true
			,maxmin: true
			,success: function(layero, index){
				console.log('------')
				// 使用from表单赋值
				console.log(data);
				form.val("layui-edit-form", data);
				const eleList = document.getElementById('upload-demo-preview');
				while ((element = eleList.firstChild)) {
					element.remove();
				}
			}
			,yes: function(index, layero){
				console.log('=======');
				// 原来的数据
				var oldData = Object.assign({}, data);
				delete oldData["id"];
				delete oldData["created_time"];
				oldData = sortDictionary(oldData);
				// 修改后的数据
				var newData = form.val("layui-edit-form");
				delete newData['file'];
				newData = sortDictionary(newData);
				
				console.log("oldData", oldData);
				console.log("newData", newData);
				if (JSON.stringify(newData) != JSON.stringify(oldData)){
					console.log("修改了数据");
					$.ajax({
						url:'/update',
						type:'POST',
						data: { ...newData, id: data.id},
						success:function(data){
							if(data.code==0){
								layer.msg("修改成功!", {icon: 1, time: 1000})
							}else{
								layer.msg('保存失败!')
							}
						}
					});
				}else{
					console.log("数据无变化")
				};
				// $("#layui-edit-form")[0].reset();
				layer.close(index);
			}
			,btn2: function(index, layero){
				// $("#layui-edit-form")[0].reset();
				layer.close(index);
			}
		    });
		  
        } else if(layEvent === 'del') {
          layer.confirm('确定删除ID为' + data.id + "的数据吗", function(index) {
		  obj.del(); // 删除对应行（tr）的DOM结构
		  layer.close(index);
		  // 向服务端发送删除指令
		  console.log('后台删除数据..');
		  $.ajax({
			url:'/delete',
			type:'POST',
			data: {id: data.id},
			success:function(data){
				if(data.code==0){
					layer.msg("删除成功!", {icon: 1, time: 1000})
				}else{
					layer.msg('删除失败!')
				}
			}
		});
		
		});
        } else if(layEvent === 'photo'){
			var imgArr = JSON.parse(data.设备照片);
			var data = [];
			var i = 1;
			imgArr.forEach(function(item) {
				data.push({
				  "alt": "设备照片",
				  "pid": i,
				  "src": item.src,
				})
				i ++;
			});
			layer.photos({
				photos: {
				  "title": "交换机设备照片",
				  "start": 0,
				  "data": data,
				},
				// footer: false // 是否显示底部栏 --- 2.8.16+
			});
		}
		
		
      });
      //=====
	  // 上传文件
	  var uploadInst = upload.render({
		elem: '#test1' //绑定元素
		,accept: 'file'
		,url: '/upload'
		,auto: true
		,multiple: true
		,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
			// 预读本地文件示例，不支持ie8
			console.log("before===", obj);
			obj.preview(function(index, file, result){
				$('#upload-demo-preview').append('<img src="'+ result +'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
			});
			//layer.load(); //上传loading
		}
		// 选择后的回调
		,choose: function(obj){
			console.log('选择了');
			console.log(obj);
		}
		// 上传完毕回调
		,done: function(res, index, upload){
			console.log("上传成功");
			// 获取已经上传过的照片
			var imgArrS = $('#input_file_form').val()
			var imgArr = JSON.parse(imgArrS);
			console.log('imgArr', imgArr);
			if (imgArr[0].src == "../static/img/null.png"){
				imgArr.pop();
			};
			if(res.code == 0){
			  layer.msg("上传成功", {icon: 6, time: 1000});
			  // $('#input_file_form').val(res.data.src);
			  // 该成多个图片后需要从原来的赋值改成追加数据
			  imgArr.push({'src': res.data.src});
			  $('#input_file_form').val(JSON.stringify(imgArr));
			}else {
			  layer.msg("上传失败")
			}
			// console.log('完成了');
			console.log('res:', res);
			console.log('index:', index);
			console.log('upload:', upload);
			layer.closeAll('loading');
			
		}
		//请求异常回调
		,error: function(){
		}
	  });
	  
	  // ====导入数据====文件上传
	  var uploadInstB = upload.render({
		elem: '#selectfile' //绑定元素
		,accept: 'file'
		,url: '/upload'
		,auto: true
		,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
			layer.load(); //上传loading
		}
		// 选择后的回调
		,choose: function(obj){
			console.log('选择了');
			console.log(obj);
			var that = this;
			// var files = this.files = obj.pushFile();
			var files = obj.pushFile();
            // console.log(files);
			// 获取files 文件对象字典的第一个键
			var key = Object.keys(files)[0];
			var filename = files[key].name;
			console.log("filename", filename)
			document.getElementById("output").innerHTML = filename
		}
		// 上传完毕回调
		,done: function(res, index, upload){
			if(res.code == 0){
			  layer.msg("上传成功", {icon: 6, time: 1000});
			}else {
			  layer.msg("上传失败")
			}
			layer.closeAll('loading');
		}
		//请求异常回调
		,error: function(){
		}
	  });
	  
	  
	  form.on('submit(searchSwitch)', function(data) {
		// 获取输入框的值
		let dataf = Object.assign({}, data.field);
		console.log(dataf);
		console.log('查询中..');
		table.reload('ID-test-table', {
			page: {curr: 1},
			where: dataf,
		});
		return false
	  });
	  //
	  /*
	  // 按下ESC按钮关闭弹层
	  $('body',document).on('keyup', function (e) {
			if (e.which === 27) {
			   // console.log("按下esc");
				layer.closeAll();
			}
		});
	  */
	  $(document).ready(function () { }).keydown(
		function (e) {
			if (e.which === 27) {
				layer.closeAll();
			}
		});
    });
    </script>
  </body>
</html>

